<template>
  <div>
    <Card istitle>
      <template #title>商品列表</template>
      <template>
        <!-- 表格信息内容 -->
        <el-table :data="goodDataList" style="width: 100%" size="mini">
          <!-- 展开内容 -->
          <el-table-column type="expand">
            <template v-slot="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="商品 ID">
                  <span>{{ props.row.id }}</span>
                </el-form-item>
                <el-form-item label="所属分类">
                  <span>{{ props.row.category }}</span>
                </el-form-item>
                <el-form-item label="商品图片">
                  <span
                    ><el-image
                      style="width: 100px; height: 100px"
                      :src="
                        'http://172.16.20.167:5000/upload/imgs/goods_img/' +
                          props.row.imgUrl
                      "
                      fit="cover"
                    ></el-image
                  ></span>
                </el-form-item>
                <el-form-item label="商品评价">
                  <span>{{ props.row.rating }}</span>
                </el-form-item>
                <el-form-item label="商品名称">
                  <span>{{ props.row.name }}</span>
                </el-form-item>
                <el-form-item label="商品描述">
                  <span>{{ props.row.goodsDesc }}</span>
                </el-form-item>
                <el-form-item label="商品价格">
                  <span>{{ props.row.price }}</span>
                </el-form-item>
                <el-form-item label="创建时间">
                  <span>{{ props.row.ctime | setTimer }}</span>
                </el-form-item>
                <el-form-item label="商品销量">
                  <span>{{ props.row.sellCount }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <!-- 表格显示内容 -->
          <el-table-column label="商品名称" prop="name"> </el-table-column>
          <el-table-column label="所属分类" prop="category"> </el-table-column>
          <el-table-column label="商品价格" prop="price"> </el-table-column>
          <el-table-column label="商品图片" prop="imgUrl">
            <template v-slot="{ row }">
              <span
                ><el-image
                  style="width: 50px; height: 50px"
                  :src="
                    'http://172.16.20.167:5000/upload/imgs/goods_img/' +
                      row.imgUrl
                  "
                  fit="cover"
                ></el-image
              ></span>
            </template>
          </el-table-column>
          <el-table-column label="商品描述" prop="goodsDesc"> </el-table-column>
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-button type="primary" size="mini" @click="showGoods(row)"
                >编辑</el-button
              >
              <el-button type="danger" size="mini" @click="delGoods(row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>

        <!-- 编辑框提示 -->
        <el-dialog
          title="商品修改"
          :visible.sync="dialogFormVisible"
          width="40%"
        >
          <el-form :model="goodsForm" :rules="rules" ref="editGoodsFrom">
            <el-form-item label="商品名称" prop="name" label-width="100px">
              <el-input v-model="goodsForm.name"></el-input>
            </el-form-item>
            <el-form-item label="商品分类" prop="category" label-width="100px">
              <el-select
                v-model="goodsForm.category"
                placeholder="请选择商品分类"
              >
                <el-option
                  v-for="(item, index) in cateArr"
                  :key="index"
                  :label="item.cateName"
                  :value="item.cateName"
                ></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="商品价格" prop="price" label-width="100px">
              <el-input-number
                v-model="goodsForm.price"
                :min="1"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="商品图片" prop="imgUrl" label-width="100px">
              <el-upload
                class="avatar-uploader"
                action="http://172.16.20.167:5000/goods/goods_img_upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img
                  v-if="goodsForm.imgUrl"
                  :src="
                    'http://172.16.20.167:5000/upload/imgs/goods_img/' +
                      goodsForm.imgUrl
                  "
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="商品描述" prop="goodsDesc" label-width="100px">
              <el-input
                type="textarea"
                v-model="goodsForm.goodsDesc"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="editGoods('editGoodsFrom')"
              >确 定</el-button
            >
          </div>
        </el-dialog>
      </template>
    </Card>
  </div>
</template>

<script>
import {
  gitGoodsList,
  deleteGoods,
  getGoodsCate,
  editGoods
} from '@/api/goods.js'
import { messagebox } from '@/utils/messagebox.js'
export default {
  data() {
    return {
      goodDataList: [],
      currentPage: 1,
      pageSize: 5,
      total: 0,
      dialogFormVisible: false,
      goodsForm: {},
      rules: {
        name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
        category: [
          { required: true, message: '请选择商品类型', trigger: 'change' }
        ],
        price: [
          { required: true, message: '请输入商品价格', trigger: 'change' }
        ],
        imgUrl: [
          {
            required: true,
            message: '请选择图片',
            trigger: 'change'
          }
        ],
        goodsDesc: [
          { required: true, message: '请输入商品描述', trigger: 'blur' }
        ]
      },
      cateArr: []
    }
  },
  methods: {
    // 获取商品数据
    async getGoodsData() {
      const { data, total } = await gitGoodsList({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        name: '*',
        category: '*'
      })
      this.goodDataList = data
      this.total = total
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val
      this.getGoodsData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getGoodsData()
    },
    // 图片上传
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      this.goodsForm.imgUrl = res.imgUrl
      console.log(this.goodsForm.imgUrl)
    },
    beforeAvatarUpload(file) {
      const arr = ['image/jpeg', 'image/gif']
      const isJPG = arr.includes(file.type)
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 删除商品
    delGoods(id) {
      messagebox.call(
        this,
        async () => {
          const { code } = await deleteGoods({ id })
          if (code === 0) {
            this.getGoodsData()
          }
        },
        '此操作将永久删除该商品, 是否继续?'
      )
    },
    // 编辑商品
    showGoods(data) {
      this.dialogFormVisible = true
      this.goodsForm = { ...data }
      console.log(data)
    },
    // 获取分类
    async getCate() {
      const { categories } = await getGoodsCate()
      this.cateArr = categories
    },
    // 修改商品
    editGoods(fromName) {
      this.$refs[fromName].validate(async valid => {
        if (valid) {
          // 发送修改信息请求
          const { code } = await editGoods({
            name: this.goodsForm.name,
            category: this.goodsForm.category,
            price: this.goodsForm.price,
            goodsDesc: this.goodsForm.goodsDesc,
            id: this.goodsForm.id,
            imgUrl: this.goodsForm.imgUrl
          })
          if (code === 0) {
            // 隐藏修改框并重新获取数据渲染
            this.dialogFormVisible = false
            this.getGoodsData()
          }
        } else {
        }
      })
    }
  },
  created() {
    // 获取商品数据
    this.getGoodsData()
    // 获取分类数据
    this.getCate()
  }
}
</script>

<style lang="less" scoped>
// 表格样式
.el-table {
  margin-bottom: 40px;
  /deep/.demo-table-expand {
    font-size: 0;
    .el-form-item {
      width: 100%;
      margin-right: 0;
      margin-bottom: 0;
    }
    label {
      width: 90px;
      color: #99a9bf;
    }
  }
}

// 上传图片样式
/deep/.avatar-uploader {
  .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin-right: 20px;
  }
  .el-upload:hover {
    border-color: #409eff;
  }
}
/deep/.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
/deep/.avatar {
  width: 100px;
  height: 100px;
  display: block;
}

// dialog样式
.el-input,
/deep/textarea {
  width: 90%;
}
</style>
